<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app2">
<!--        模拟一个很复杂的结构-->
        <cdm :datas="listadata" @changeval="change">我的按钮1</cdm>
        {{msg}}
        <cdm :datas="listadata">我的按钮2</cdm>
    </div>
</body>

<script>
    Vue.component("cdm",{
        props:["datas"],
        data(){
            return {
                val:""
            }
        },
        template:'<div>\n' +
            '            <button style="color: pink;font-size: 20px;background: gray"><slot>按钮</slot></button>\n' +
            '            <br>\n' +
            '\n' +
            '            <ol>\n' +
            '                <li v-for="lid in datas">{{lid}}</li>\n' +
            '            </ol>\n' +
            '            <br>' +
            '            <input type="text" v-model="val">' +
            '        </div>',
        watch:{
            val:function (newVal){
                //将当前子组件的值，主动通知给父组件，通过自定义事件
                //changeval 是子组件自定义的事件,那么父组件在使用这个子组件时，就需要绑定这个事件
                this.$emit("changeval",newVal)
            }
        }
    })

    new Vue({
        el:"#app2",
        data:{
            listadata:["a","b","c","d"],
            msg:""
        },
        methods:{
            change(newVal){
                this.msg = newVal;
            }
        },
        mounted:function (){
            alert("挂载完成~~")
            //在这执行进入页面后的数据加载
        }
    });
</script>
</html>